<template>
  <div class="return-management">
    <h1>退货管理</h1>
    <el-table :data="returns" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="退货编号" width="180"></el-table-column>
      <el-table-column prop="customerName" label="客户名" width="180"></el-table-column>
      <el-table-column prop="productName" label="商品名称"></el-table-column>
      <el-table-column prop="reason" label="退货原因"></el-table-column>
      <el-table-column prop="applyTime" label="申请时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="viewReturn(scope.row)">查看</el-button>
          <el-button type="danger" size="small" @click="approveReturn(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      returns: [
        { id: '10001', customerName: '张三', productName: '商品A', reason: '尺寸不符', applyTime: '2023-04-10 10:00', status: '待审核' },
        { id: '10002', customerName: '李四', productName: '商品B', reason: '颜色错误', applyTime: '2023-04-11 15:00', status: '待审核' },
        { id: '10003', customerName: '王五', productName: '商品C', reason: '型号不符', applyTime: '2023-04-12 16:00', status: '待审核' },
        { id: '10004', customerName: '赵六', productName: '商品D', reason: '残次品', applyTime: '2023-04-15 14:00', status: '待审核' },
        { id: '10005', customerName: '孙七', productName: '商品E', reason: '漏发货', applyTime: '2023-04-20 20:00', status: '待审核' },
        // 更多退货信息...
      ]
    };
  },
  methods: {
    viewReturn(returnItem) {
      // 查看退货详情的逻辑
      console.log('查看退货：', returnItem);
      alert(`退货编号：${returnItem.id}，客户名：${returnItem.customerName}`);
    },
    approveReturn(returnItem) {
      // 审核逻辑
      const index = this.returns.indexOf(returnItem);
      if (index !== -1) {
        this.returns.splice(index, 1); // 从数组中移除该退货记录
        this.$message.success('退货审核成功并已移除记录！');
      }
    }
  }
};
</script>

<style scoped>
.return-management {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

/* 其他样式可以根据实际需要添加 */
</style>